<template>
  <my-header></my-header>
  <view class="container bg-color1">
    <uni-segmented-control :current="curr" :values="items" @clickItem="handleSwitch"
      style-type="text"></uni-segmented-control>
    <!-- 订单列表空页面 -->
    <view class="empty-box" v-show="false">
      <image src="../../static/empty.png" mode="widthFix"></image>
      <view class="">暂无数据</view>
    </view>
    <!-- 订单列表 -->
    <view class="order-list">
      <!-- 全部 -->
      <view v-show="curr === 0">
        <template v-for="(item, index) of 4" :key="index">
          <order-item :item="{}" isShowBtn1 btn1Text="取消订单" btn2Text="支付"></order-item>
        </template>
        <template v-for="(item, index) of 4" :key="index">
          <order-item :item="{}" status="已取消(未支付)" btn2Text="删除"></order-item>
        </template>
      </view>

      <!-- 进行中 -->
      <view v-show="curr === 1">
        <template v-for="(item, index) of 4" :key="index">
          <order-item :item="{}" status="进行中" isShowBtn1 btn1Text="取消服务" btn2Text="完成服务"></order-item>
        </template>
      </view>
      <template>进行中</template>
      <!-- 待支付 -->
      <view v-show="curr === 2">
        <template v-for="(item, index) of 4" :key="index">
          <order-item :item="{}" isShowBtn1 btn1Text="取消订单"></order-item>
        </template>
      </view>
      <!-- 已完成 -->
      <view v-show="curr === 3">
        <template v-for="(item, index) of 10" :key="index">
          <order-item :popup="commPopupRef" :item="{}" status="已完成" isShowBtn1 :index="index">
            <button plain type="primary" size="mini" style="margin-left: 14px">再次购买</button>
          </order-item>
        </template>
      </view>
      <!-- 待评价 -->
      <view v-show="curr === 4">
        <template v-for="(item, index) of 4" :key="index">
          <order-item :popup="commPopupRef" :item="{}" status="待评价" isShowBtn1>
            <template #ques>
              <view class="question">服务是否满意？</view>
            </template>
          </order-item>
        </template>
      </view>
      <!-- 已取消 -->
      <view v-show="curr === 5">
        <template v-for="(item, index) of 4" :key="index">
          <order-item :item="{}" status="已取消(已支付)" isShowBtn1 btn2Text="再次购买"></order-item>
        </template>
      </view>
    </view>
  </view>
  <!-- 评价底部弹出层 -->
  <uni-popup type="bottom" ref="commPopupRef" :is-mask-click="false">
    <my-popup :popup="commPopupRef" title="写评价">
      <template #scrView>
        <view class="commend-box">
          <view class="assis-name-nox">
            <view class="ass-name">
              饶梦娇
            </view>
            <!-- 图标列表 -->
            <view class="icons">
              <uni-icons fontFamily="CustomFont" :size="20" class="kefu">{{ '&#xe769;' }}</uni-icons>
              <uni-icons fontFamily="CustomFont" :size="20" class="kefu">{{ '&#xe768;' }}</uni-icons>
              <uni-icons fontFamily="CustomFont" :size="20" class="kefu">{{ '&#xe7d0;' }}</uni-icons>
              <uni-icons fontFamily="CustomFont" :size="20" class="kefu">{{ '&#xe600;' }}</uni-icons>
              <uni-icons fontFamily="CustomFont" :size="20" class="kefu">{{ '&#xe623;' }}</uni-icons>
            </view>
            <!-- 评分组件 -->
            <uni-rate></uni-rate>
          </view>
          <!-- 文本输入框 -->
          <textarea placeholder="亲,我的服务怎么样？"></textarea>
          <!-- footer -->
          <view class="footer">
            <!-- 左侧标题 -->
            <view class="check-box">
              <checkbox-group>
                <label>
                  <checkbox></checkbox>匿名评价
                </label>
              </checkbox-group>
            </view>
            <!-- 右侧提示文字 -->
            <view class="tip-text">
              隐藏头像和昵称
            </view>
          </view>
        </view>
      </template>
      <template #footer>
        <button class="btn">发布</button>
      </template>
    </my-popup>
  </uni-popup>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const items = ['全部', '进行中', '待支付', '已完成', '待评价', '已取消'];

  const curr = ref(0);
  // 组件实例
  const commPopupRef = ref(null);
  // 点击切换视图
  const handleSwitch = (e) => {
    curr.value = e.currentIndex;
  };
</script>

<style lang="scss" scoped>
  @font-face {
    font-family: CustomFont;
    src: url('../../static/font-icon/iconfont.ttf');
  }

  .container {
    min-height: calc(100vh - 50px);

    .empty-box {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: $uni-text-color-grey;
      font-size: 28rpx;

      image {
        width: 100rpx;
      }
    }

    // 订单列表
    .order-list {
      overflow: hidden;

      .question {
        color: #ffaa00;
      }
    }
  }

  //弹出层子元素
  .commend-box {
    height: 40vh;
    background: skyblue;
  }

  .btn {
    margin-top: 15rpx;
    background: #ffaa00;
  }
</style>